Day8 Javascript陣列

2022 iThome 鐵人賽

DAY 8

Modern Web

Javascripts惡補小教室系列第 8 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-09-23 15:57:39

646 瀏覽

分享至

前面提到資料類型的時候，有稍微提到陣列，而現在我們要開始介紹這個方便儲存的好東西!

        var person=['jason','leo','dina'] //陣列範例

為甚麼要使用到陣列來儲存變數呢?因為我們有相同類型的項目要儲存時，若是單一變數儲存一個值，會有大量的變數，宣告上面會麻煩許多，程式碼也會變得冗長，當陣列的存在就是一次能夠儲存許多的值，且在for迴圈遍歷時可以訪問這些變量。

      var person1 = "jason";
      var person2 = "leo";
      var person3 = "dina";
      //宣告上麻煩，及程式碼十分冗長

抓取陣列元素

首先我們要瞭解到陣列一開始的索引(index)是怎麼開始的，就像一般的程式邏輯一樣，第一個元素是person[0]、第二個是person[1]。

  <body>
    <p>我的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      document.getElementById("demo").innerHTML = person[0];
    </script>
  </body>

更改陣列中的元素

  <body>
    <p>我的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      person[0]="perter";                   //更改陣列中元素
      document.getElementById("demo").innerHTML = person[0];
    </script>
  </body>

你也可以將整個陣列給印出來

  <body>
    <p>大家的名子是: <spa id="demo"></span> </p>
    <script>
      var person = ["jason", "leo", "dina"];
      document.getElementById("demo").innerHTML = person;
    </script>
  </body>

陣列長度

當我們今天想要知道一個陣列有多少元素時，length是一個很好用的方法。

    <script>
      var person = ["jason", "leo", "dina"];
      var x= person.length
      console.log(x)
    </script>                               //length=3;

或是想訪問陣列最後一個元素時，卻又不曉得最後一個索引(index)是多少。

    <script>
      var person = ["jason", "leo", "dina"];
      var x= person.length
      console.log(person[x-1]) ;             //'dina'
    </script>

for迴圈遍歷陣列

  <body>
    <p id="demo"></p>

    <script>
      var person, text, len, i;
      person = ["jason", "leo", "dina"];
      len = person.length;

      text = "<ul>";
      for (i = 0; i < len; i++) {
        text += "<li>" + person[i] + "</li>";
      }
      text += "</ul>";

      document.getElementById("demo").innerHTML = text;
    </script>
  </body>

今天先介紹到這邊，陣列還有許多的方法及遍歷陣列不同的類型，我們明天再繼續介紹!